<template>
    <div>
        <el-card>
            <el-table ref="enterpriseRef" :data="tableData" style="width: 100%; max-height: 100%; height: 100%"
                table-layout="fixed" v-loading="loading"
                :header-cell-style="{'text-align':'center'}"
                :cell-style="{'text-align':'center'}">
                <el-table-column fixed prop="taskName" label="任务名称" show-overflow-tooltip/>
                <el-table-column prop="invokeTarget" label="调用目标方法" />
                <el-table-column prop="invokeParam" label="调用目标参数" />
                <el-table-column prop="status" label="执行结果">
                    <template #default="scope">
                        <span v-if="scope.row.status === '0'">成功</span>
                        <span v-else>失败</span>
                    </template>
                </el-table-column>
                <el-table-column prop="taskMessage" label="日志信息" show-overflow-tooltip/>
                <el-table-column prop="exceptionInfo" label="异常信息"  show-overflow-tooltip />
                <el-table-column prop="startTime" label="开始执行时间" />
                <el-table-column prop="stopTime" label="执行结束时间" />
            </el-table>
            <div class="card-footer">
                <el-pagination  layout="total, sizes, prev, pager, next, jumper"
                    :page-sizes="[10,20,30,40,50,100,500]"
                    background v-model:page-size="pagination.size"
                    v-model:current-page="pagination.page" :total="pagination.total" @size-change="sizeChange"
                    @current-change="pageChange" class="pagination" />
            </div>
        </el-card>
    </div>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import { pageList, del } from "@/api/admin/taskLogs"
const loading = ref(true);
const conditions = ref([
    {
        column: "distinct",
        type: "distinct",
        value: "true",
    },
]);
const pagination = reactive({
    page: 1,
    size: 10,
    total: 0,
});
const tableData = ref([]);
/**
 * 获取数据
 */
const doDataList = () => {
    loading.value = true
    let datas = {
        pageNum: pagination.page,
        pageSize: pagination.size,
        condition: JSON.stringify(conditions.value),
    };
    pageList(datas).then((res) => {
        console.log(res)
        tableData.value = res.data.records;
        loading.value = false;
        tableData.value = res.data.records;
        pagination.size = res.data.pageSize;
        pagination.page = res.data.currentPage;
        pagination.total = res.data.total;

    }).catch((msg) => {

    })
}
/**
 * 初始化方法
 */
const init = () => {
    doDataList()
}
const sizeChange = (value) => {
    pagination.size = value;
    pagination.page = 1;
    doDataList();
};
/**
 * 页总数改变
 */
const pageChange = (value) => {
    pagination.page = value;
    doDataList();
};
/**
 * 页面加载完后执行
 */
onMounted(() => {
    init()
})
</script>

<style lang="less" scoped>
.title {
    min-width: 5em;
}

.el-table .warning-row {
    --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
    --el-table-tr-bg-color: var(--el-color-success-light-9);
}

.el-card__header {
    max-height: 10vh;
}

.pagination {
    max-height: 3vh;
}

.card-footer {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.total-font {
    margin-right: 15px;
    font-weight: 500;
    line-height: 21px;
    color: #595959;
}
</style>